<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="node_modules/vue/dist/vue.min.js"></script>
</head>
<body>
    <div id='con'>
        <!-- v-if 就是对元素在网页中进行添加和删除 -->
        <input type="checkbox" v-model="bool">
        <p v-if="bool">我是测试v-if的 </p>
        <p v-show="bool">我是测试v-show的 </p>

        <hr>
        <h1>v-else</h1>
        <p v-if="bool">请登录</p>
        <!-- <p>我是占位的    v-if 和 v-else 之间不能有内容</p> -->
        <p v-else>欢迎您会员！！</p>

        <hr>
        <h1>v-else-if</h1>
        <p v-if="false">1111111</p>
        <p v-else-if="false">2222222</p>
        <p v-else-if="false">3333333</p>
        <p v-else>什么都不是</p>
    </div>
    <script>
        new Vue({
            el:"#con",
            data:{
                bool:true
            },
            methods:{

            }
        })
    </script>
</body>
</html>